<template>
  <div class="common-body-page report-detail-page">
    <header class="main-header">
        <div>
          <!-- 标题 -->
          <div class="title">
            <router-link to='/' tag="p">{{$I18n.dashBoard}}<span>/</span></router-link>
            <router-link to='/orderList' tag="p">{{$I18n.order}}<span>/</span></router-link>
            <p class="black">{{$I18n.orderInfo}}</p>
          </div>
          <!-- 按钮 -->
          <div>
            <button class="btn" @click="saveOrder" v-if="!isEdit">{{$I18n.save}}</button>
            <button class="btn" @click="isEdit=false" v-else>{{$I18n.edit}}</button>
            <button class="cancel-btn" @click="cancelDialog=true">{{$I18n.cancel}}</button>
          </div>
        </div>
    </header>
    <section class="gc-body">
      <h3 class="title">{{$I18n.orderInfo}}</h3>
        <div class="body">
        <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.baseInfo}}</div>
        <el-form>
          <!-- 站点 -->
          <el-form-item :label="$I18n.site" required :class="{'no-line': isEdit}">
            <el-select v-model="orderData.site" :readonly="isEdit">
              <el-option v-for="item in siteList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
          <!-- 来源 -->
          <el-form-item :label="$I18n.accountSource" required :class="{'no-line': isEdit}">
            <el-select v-model="orderData.accountSource" :readonly="isEdit">
              <el-option v-for="item in sourceList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
          <!-- 账号 -->
         <el-form-item  :label="$I18n.email"  :class="{'no-line': isEdit}">
            <el-input v-model="orderData.email" :readonly="true"></el-input>
            <i  class="fa fa-external-link" @click="paramsAccountDialog=true"></i>
          </el-form-item>
          <!-- 订单号 -->
          <el-form-item  :label="$I18n.orderNo" required :class="{'no-line': isEdit}">
            <el-input v-model="orderData.orderNo" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 金额 -->
          <el-form-item  :label="$I18n.amount" required :class="{'no-line': isEdit}">
            <el-input v-model="orderData.amount" :readonly="isEdit"></el-input>
          </el-form-item>
            <!-- 处理人 -->
          <el-form-item  :label="$I18n.optionUserName" required :class="{'no-line': isEdit}">
            <el-input v-model="orderData.optionUserName" :readonly="isEdit"></el-input>
          </el-form-item>
             <!-- 留评日期 -->
          <el-form-item  :label="$I18n.dueCommentDate" required :class="{'no-line': isEdit}">
            <el-date-picker class="el-gclife-date" :readonly="isEdit" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="orderData.dueCommentDate"   type="date" placeholder="请选择应留评日期"></el-date-picker>
          </el-form-item>
          <!-- 客户 -->
          <el-form-item  :label="$I18n.customerName" :class="{'no-line': isEdit}">
            <el-input v-model="orderData.customerName" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item :label="$I18n.orderStatus" required :class="{'no-line': isEdit}">
            <el-select v-model="orderData.orderStatus" :readonly="isEdit">
              <el-option v-for="item in statusList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
          <!-- 备注 -->
          <el-form-item  :label="$I18n.remark" :class="{'no-line': isEdit}">
            <el-input v-model="orderData.remark" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 留评标题 -->
          <el-form-item  :label="$I18n.commentTitle" :class="{'no-line': isEdit}">
            <el-input v-model="orderData.commentTitle" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 留评内容 -->
          <el-form-item  :label="$I18n.commentContent" class="row" :class="{'no-line': isEdit}">
            <el-input type="textarea" rows="5" v-model="orderData.commentContent" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 图片地址1 -->
          <el-form-item  :label="$I18n.imageUrl1" class="row" :class="{'no-line': isEdit}">
            <el-input type="textarea"  v-model="orderData.imageUrl1" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 图片地址2 -->
          <el-form-item  :label="$I18n.imageUrl2" class="row" :class="{'no-line': isEdit}">
            <el-input type="textarea" v-model="orderData.imageUrl2" :readonly="isEdit"></el-input>
          </el-form-item>
        </el-form>


          <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.applyInfo}}</div>
        <el-form>
          <!-- 下单号 -->
          <el-form-item  :label="$I18n.applyId" :class="{'no-line': true}">
            <el-input v-model="orderData.applyId" :readonly="true"></el-input>
            <i  class="fa fa-external-link" @click="paramsDialog=true"></i>
          </el-form-item>
          <!-- 站点 -->
          <el-form-item  :label="$I18n.site" :class="{'no-line': true}">
            <el-input v-model="orderData.site" :readonly="true"></el-input>
          </el-form-item>
           <!-- 来源 -->
          <el-form-item  :label="$I18n.applySource" :class="{'no-line': true}">
            <el-input v-model="orderData.applySource" :readonly="true"></el-input>
          </el-form-item>
          <!-- 下单日期 -->
          <el-form-item  :label="$I18n.applyDate" :class="{'no-line': true}">
            <el-input v-model="orderData.applyDate" :readonly="true"></el-input>
          </el-form-item>
          <!-- 期望留评日期 -->
          <el-form-item  :label="$I18n.expectCommentDate" :class="{'no-line': true}">
            <el-input v-model="orderData.expectCommentDate" :readonly="true"></el-input>
          </el-form-item>
          <!-- 产品负责人 -->
          <el-form-item  :label="$I18n.productBelongUser" :class="{'no-line': true}">
            <el-input v-model="orderData.productBelongUser" :readonly="true"></el-input>
          </el-form-item>
            <!-- 业务类型 -->
          <el-form-item  :label="$I18n.businessType" :class="{'no-line': true}">
            <el-input v-model="orderData.businessType" :readonly="true"></el-input>
          </el-form-item>
          <!-- 物流 -->
          <el-form-item  :label="$I18n.expressMethod" :class="{'no-line': true}">
            <el-input v-model="orderData.expressMethod" :readonly="true"></el-input>
          </el-form-item>
            <!-- 备注 -->
          <el-form-item  :label="$I18n.remark" :class="{'no-line': true}">
            <el-input v-model="orderData.remark" :readonly="true"></el-input>
          </el-form-item>   
        </el-form>
        <!-- 产品信息 -->
        <div class="self-tab">{{$I18n.productInfo}}</div>
        <el-form>
          <!-- 店铺 -->
          <el-form-item  :label="$I18n.shopName" :class="{'no-line': true}">
            <el-input v-model="orderData.shopName" :readonly="true"></el-input>
          </el-form-item>
           <!-- 产品 -->
          <el-form-item  :label="$I18n.productName" :class="{'no-line': true}">
            <el-input v-model="orderData.productName" :readonly="true"></el-input>
          </el-form-item>
          <!-- Assin -->
          <el-form-item  :label="$I18n.assin" :class="{'no-line': true}">
            <el-input v-model="orderData.assin" :readonly="true"></el-input>
          </el-form-item>
          <!-- 价格 -->
          <el-form-item  :label="$I18n.price" :class="{'no-line': true}">
            <el-input v-model="orderData.price" :readonly="true"></el-input>
          </el-form-item>
          <!-- 数量 -->
          <el-form-item  :label="$I18n.mult" :class="{'no-line': true}">
            <el-input v-model="orderData.mult" :readonly="true"></el-input>
          </el-form-item>
          <!-- 关键词 -->
          <el-form-item  :label="$I18n.searchKeyword" :class="{'no-line': true}">
            <el-input v-model="orderData.searchKeyword" :readonly="true"></el-input>
          </el-form-item>
            <!-- 位置 -->
          <el-form-item  :label="$I18n.position" :class="{'no-line': true}">
            <el-input v-model="orderData.position" :readonly="true"></el-input>
          </el-form-item>
           <!-- 产品网址 -->
          <el-form-item  :label="$I18n.productUrl"  class="row" :class="{'no-line': true}">
            <el-input type="textarea" v-model="orderData.productUrl" :readonly="true"></el-input>
          </el-form-item>       
        </el-form>

        <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.paymentInfo}}</div>
        <el-form>
          <!-- 应返款 -->
          <el-form-item  :label="$I18n.dueRefundAdmount" :class="{'no-line': true}">
            <el-input v-model="orderData.dueRefundAdmount" :readonly="true"></el-input>
          </el-form-item>
          <!-- 返款日期 -->
          <el-form-item  :label="$I18n.actualRefundDate" required :class="{'no-line': isEdit}">
            <el-date-picker class="el-gclife-date" :readonly="isEdit" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="orderData.actualRefundDate"   type="date" placeholder="请选返款日期"></el-date-picker>
          </el-form-item>
          <!-- 应收佣金 -->
          <el-form-item  :label="$I18n.dueCommissionAmount" required :class="{'no-line': isEdit}">
            <el-input v-model="orderData.dueCommissionAmount" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- 应收人 -->
          <el-form-item  :label="$I18n.dueUser" :class="{'no-line': isEdit}">
            <el-input v-model="orderData.dueUser" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- 收款方式 -->
          <el-form-item  :label="$I18n.dueMethod" :class="{'no-line': isEdit}">
            <el-input v-model="orderData.dueMethod" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- 汇率 -->
          <el-form-item  :label="$I18n.exchangeRate" required :class="{'no-line': isEdit}">
            <el-input v-model="orderData.exchangeRate" :readonly="isEdit"></el-input>
          </el-form-item>
        </el-form>

        <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.provider}}</div>
        <el-form>
           <!-- 实收返款 -->
          <el-form-item  :label="$I18n.providerContactName" :class="{'no-line': true}">
            <el-input v-model="orderData.providerContactName" :readonly="true"></el-input>
             <i  class="fa fa-external-link" @click="paramsProviderDialog=true"></i>
          </el-form-item>
           <!-- 实收佣金 -->
          <el-form-item  :label="$I18n.providerContactMethod" :class="{'no-line': true}">
            <el-input v-model="orderData.providerContactMethod" :readonly="true"></el-input>
          </el-form-item>
          <!-- 实收人 -->
          <el-form-item  :label="$I18n.providerCompanyName" :class="{'no-line': true}">
            <el-input v-model="orderData.providerCompanyName" :readonly="true"></el-input>
          </el-form-item>
           <!-- 实收方式 -->
          <el-form-item  :label="$I18n.providerCommissionAmount" :class="{'no-line': true}">
            <el-input v-model="orderData.providerCommissionAmount" :readonly="true"></el-input>
          </el-form-item>
           <!-- 实收方式 -->
          <el-form-item  :label="$I18n.providerExchangeRate" :class="{'no-line': true}">
            <el-input v-model="orderData.providerExchangeRate" :readonly="true"></el-input>
          </el-form-item>
           <!-- 实收方式 -->
          <el-form-item  :label="$I18n.providerRefundMethod" :class="{'no-line': true}">
            <el-input v-model="orderData.providerRefundMethod" :readonly="true"></el-input>
          </el-form-item>
          <!-- 留评内容 -->
          <el-form-item  :label="$I18n.providerRemark" class="row" :class="{'no-line': true}">
            <el-input type="textarea"  v-model="orderData.providerRemark" :readonly="true"></el-input>
          </el-form-item>
        </el-form>

      </div>
    </section>


     <!-- card信息 -->
    <el-dialog :title="$I18n.apply" :visible.sync="paramsDialog" custom-class="big-dialog">
      <!-- 有左右margin的放.body里面，跟表格100%宽度分开 -->
      <div class="body">
        <!-- 搜索 -->
        <Search ref="search" @search="search" :placeholder="$I18n.reportDeatilSearch"></Search>
        <!-- 分页 -->
        <Pagination :pageSize="10" @load="loadTableList"></Pagination>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table class="small-table" :data="applyDatalist" stripe  @row-click="confirmDiag">
          <!-- 邮箱 -->
          <el-table-column prop="applyId" :label="$I18n.applyId"></el-table-column>
          <el-table-column prop="site" :label="$I18n.site"></el-table-column>
          <!-- 站点 -->
          <el-table-column prop="applyDate" :label="$I18n.applyDate"></el-table-column>
           <!-- 店铺 -->
          <el-table-column prop="shopName" :label="$I18n.shopName"></el-table-column>
           <!-- 客户名称 -->
          <el-table-column prop="productBelongUser" :label="$I18n.productBelongUser"></el-table-column>
           <!-- 产品名称 -->
          <el-table-column prop="productName" :label="$I18n.productName"></el-table-column>
           <!-- assin -->
          <el-table-column prop="assin" :label="$I18n.assin"></el-table-column>
           <!-- 关键字 -->
          <el-table-column prop="searchKeyword" :label="$I18n.searchKeyword"></el-table-column>
           <el-table-column prop="position" :label="$I18n.position"></el-table-column>
          <!-- 状态 -->
          <el-table-column prop="applyStatus" :label="$I18n.applyStatus"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="paramsDialog=false">{{$I18n.cancel}}</button>
      </div>
      <!-- 表格 end -->
    </el-dialog>



     <!-- 账号信息 -->
    <el-dialog :title="$I18n.account" :visible.sync="paramsAccountDialog" custom-class="big-dialog">
      <!-- 有左右margin的放.body里面，跟表格100%宽度分开 -->
      <div class="body">
        <!-- 搜索 -->
        <Search ref="searchAccount" @search="searchAccount" :placeholder="$I18n.reportDeatilSearch"></Search>
        <!-- 分页 -->
        <Pagination :pageSize="10" @load="loadAccountTableList"></Pagination>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table class="small-table" :data="accountDataList" stripe  @row-click="confirmAccountDiag">
          <!-- email -->
          <el-table-column prop="email" :label="$I18n.email"></el-table-column>
              <!-- 站点 -->
          <el-table-column prop="site" :label="$I18n.site"></el-table-column>
          <!-- 使用类型 -->
          <el-table-column prop="accountUseType" :label="$I18n.accountUseType"></el-table-column>
          <!-- 虚拟机名称 -->
          <el-table-column prop="virtualName" :label="$I18n.virtualName"></el-table-column>
          <!-- 虚拟机状态 -->
          <el-table-column prop="accountStatus" :label="$I18n.status"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="paramsAccountDialog=false">{{$I18n.cancel}}</button>
      </div>
      <!-- 表格 end -->
    </el-dialog>



     <!-- 第三方渠道信息 -->
    <el-dialog :title="$I18n.providerCompanyName" :visible.sync="paramsProviderDialog" custom-class="big-dialog">
      <!-- 有左右margin的放.body里面，跟表格100%宽度分开 -->
      <div class="body">
        <!-- 搜索 -->
        <Search ref="searchProvider" @search="searchProvider" :placeholder="$I18n.reportDeatilSearch"></Search>
        <!-- 分页 -->
        <Pagination :pageSize="10" @load="loadProviderTableList"></Pagination>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table class="small-table" :data="providerDatalist" stripe  @row-click="confirmProviderDiag">
          <!-- 邮箱 -->
          <el-table-column prop="providerContactName" :label="$I18n.providerContactName"></el-table-column>
          <el-table-column prop="site" :label="$I18n.site"></el-table-column>
          <!-- 站点 -->
          <el-table-column prop="providerContactMethod" :label="$I18n.providerContactMethod"></el-table-column>
           <!-- 客户名称 -->
          <el-table-column prop="providerCompanyName" :label="$I18n.providerCompanyName"></el-table-column>
           <!-- 产品名称 -->
          <el-table-column prop="providerCommissionAmount" :label="$I18n.providerCommissionAmount"></el-table-column>
           <!-- assin -->
          <el-table-column prop="providerExchangeRate" :label="$I18n.providerExchangeRate"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="paramsProviderDialog=false">{{$I18n.cancel}}</button>
      </div>
      <!-- 表格 end -->
    </el-dialog>

    <!-- 取消弹框 -->
    <el-dialog :title="$I18n.hint" :visible.sync="cancelDialog" custom-class="hit-dialog">
      <p class="text">{{$I18n.confirmBack}}</p>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="$router.push('/orderList')" >{{$I18n.ok}}</button>
        <button class="cancel-btn" @click="cancelDialog=false">{{$I18n.cancel}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import INTERFACE from './interface'
import Search from '@/components/common/search'
import Pagination from '@/components/common/pagination'
import EventBus from '@/services/eventBus'

export default {
  components: {
    Search,
    Pagination
  },
  data() {
    return {
      orderId: this.$route.query.orderId,
      cancelDialog: false,
      paramsDialog: false,
      paramsAccountDialog: false,
      paramsProviderDialog: false,
      orderData: {},
      tagsInfo: {},
      isEdit: false,
      applyDatalist: [],
      accountDataList: [],
      providerDatalist: [],
      siteList: [
        {codeKey: 'US', codeName: '美国'},
        {codeKey: 'JP', codeName: '日本'},
        {codeKey: 'FR', codeName: '法国'},
        {codeKey: 'CA', codeName: '加拿大'},
        {codeKey: 'UK', codeName: '英国'},
        {codeKey: 'IT', codeName: '意大利'},
        {codeKey: 'DE', codeName: '德国'},
        {codeKey: 'AU', codeName: '澳大利亚'},
        {codeKey: 'ES', codeName: '西班牙'},
        {codeKey: 'KR', codeName: '韩国'},
      ],
      statusList: [
        {codeKey: 'PENDING', codeName: '待付款'},
        {codeKey: 'PAY_COMPLETE', codeName: '已付款，未返产品款'},
        {codeKey: 'WAIT_SUPPLEMENT', codeName: '待补单'},
        {codeKey: 'SHIPPED_CHECK_COMPLETE', codeName: '发货核对完成'},
        {codeKey: 'REFUND_PRODUCT_AMOUNT', codeName: '已返产品款'},
        {codeKey: 'REVIEWS', codeName: '已留评,未返佣'},
        {codeKey: 'REFUND_COMMISSION_AMOUNT', codeName: '已返佣'},
        {codeKey: 'CANCELLED_NO_REFUND', codeName: '已取消,中介未退款'},
        {codeKey: 'CANCELLED', codeName: '已取消'},
        {codeKey: 'COMPLETE', codeName: '订单完成'}
      ],
      sourceList: [
        {codeKey: 'INSIDE', codeName: '内部账号'},
        {codeKey: 'OUTSIDE', codeName: '外部账号'}
      ],
      payStatusList: [
        {codeKey: 'PENDING', codeName: '未返款'},
        {codeKey: 'REFUND_PRODUCT_AMOUNT', codeName: '已返产品款'},
        {codeKey: 'REFUND_COMMISSION_AMOUNT', codeName: '已返佣'},
      ],
    }
  },
  created() {
    if (!this.orderId) return
    this.isEdit = true
    INTERFACE.queryOrderDetail({orderId: this.orderId}).then(res => {
      this.orderData = res.data
    })
  },
  methods: {
    saveOrder() {
      this.orderData.orderId = this.orderId;
      INTERFACE.saveOrder(this.orderData).then(res => {
        if (res.error !== 'SUCCESS') return
        window.Tips(res.message)
        this.$router.push('/orderList')
      })
    },
     // 开始搜索,table组件会监听tagsInfo,只需改变即可
    search(obj = {}) {
      Object.assign(this.tagsInfo, obj)
      INTERFACE.queryApplyList(this.tagsInfo).then(res => {
        this.applyDatalist = res.data.data
        // 通知分页组件总共条数
        EventBus.$emit('pageData', {totalPage: res.data.totalPage, currentPage: res.data.currentPage})
      })
    },
    // 改变页码，重新加载表格数据
    loadTableList(page) {
      //  watch监听不到Object.assign，故用$set
      this.$set(this.tagsInfo, 'pageSize', page.pageSize)
      this.$set(this.tagsInfo, 'currentPage', page.currentPage)
      this.search()
    },
    // 开始搜索,table组件会监听tagsInfo,只需改变即可
    searchAccount(obj = {}) {
      Object.assign(this.tagsInfo, obj)
      INTERFACE.queryAccountList(this.tagsInfo).then(res => {
        this.accountDataList = res.data.data
        // 通知分页组件总共条数
        EventBus.$emit('pageData', {totalPage: res.data.totalPage, currentPage: res.data.currentPage})
      })
    },
    // 改变页码，重新加载表格数据
    loadAccountTableList(page) {
      //  watch监听不到Object.assign，故用$set
      this.$set(this.tagsInfo, 'pageSize', page.pageSize)
      this.$set(this.tagsInfo, 'currentPage', page.currentPage)
      this.searchAccount()
    },
    // 开始搜索,table组件会监听tagsInfo,只需改变即可
    searchProvider(obj = {}) {
      Object.assign(this.tagsInfo, obj)
      INTERFACE.queryProviderList(this.tagsInfo).then(res => {
        this.providerDatalist = res.data.data
        // 通知分页组件总共条数
        EventBus.$emit('pageData', {totalPage: res.data.totalPage, currentPage: res.data.currentPage})
      })
    },
    // 改变页码，重新加载表格数据
    loadProviderTableList(page) {
      //  watch监听不到Object.assign，故用$set
      this.$set(this.tagsInfo, 'pageSize', page.pageSize)
      this.$set(this.tagsInfo, 'currentPage', page.currentPage)
      this.searchProvider()
    },
    confirmDiag(row) {
      this.$set(this.orderData, 'applyId', row.applyId)
      this.$set(this.orderData, 'shopName', row.shopName)
      this.$set(this.orderData, 'site', row.site)
      this.$set(this.orderData, 'applySource', row.applySource)
      this.$set(this.orderData, 'applyDate', row.applyDate)
      this.$set(this.orderData, 'expectCommentDate', row.expectCommentDate)
      this.$set(this.orderData, 'productBelongUser', row.productBelongUser)
      this.$set(this.orderData, 'businessType', row.businessType)
      this.$set(this.orderData, 'expressMethod', row.expressMethod)
      this.$set(this.orderData, 'remark', row.remark)
      this.$set(this.orderData, 'productName', row.productName)
      this.$set(this.orderData, 'assin', row.assin)
      this.$set(this.orderData, 'price', row.price)
      this.$set(this.orderData, 'mult', row.mult)
      this.$set(this.orderData, 'searchKeyword', row.searchKeyword)
      this.$set(this.orderData, 'position', row.position)
      this.$set(this.orderData, 'productUrl', row.productUrl)
      this.paramsDialog = false
    },
    confirmAccountDiag(row) {
      this.$set(this.orderData, 'accountId', row.accountId)
      this.$set(this.orderData, 'email', row.email)
      this.paramsAccountDialog = false
    },
    confirmProviderDiag(row) {
      this.$set(this.orderData, 'thirdProviderId', row.thirdProviderId)
      this.$set(this.orderData, 'providerContactName', row.providerContactName)
      this.$set(this.orderData, 'providerContactMethod', row.providerContactMethod)
      this.$set(this.orderData, 'providerContactNo', row.providerContactNo)
      this.$set(this.orderData, 'providerCompanyName', row.providerCompanyName)
      this.$set(this.orderData, 'providerCommissionAmount', row.providerCommissionAmount)
      this.$set(this.orderData, 'providerExchangeRate', row.providerExchangeRate)
      this.$set(this.orderData, 'providerRemark', row.providerRemark)
      this.$set(this.orderData, 'providerRefundMethod', row.providerRefundMethod)
      this.$set(this.orderData, 'providerRefundAccountNo', row.providerRefundAccountNo)
      this.paramsProviderDialog = false
    },
  }
}
</script>

<style lang="stylus">
  .fa-external-link
    position absolute
    color #6a8ebf
    cursor pointer
    top 50%
    right -18px
    transform translateY(-50%)
  .search-input
    width 100%
  .pagination-page
    justify-content flex-end
    margin-top 5px  
</style>